/*
    description:
        单选框，圆框，圆红点选择
    How to use:
        <div class="w_radio">
            <input type="radio" placeholder="">
            <div class="new_copy"></div>
        </div>
*/

.w_radio {
    width: 40*@u;
    height: 40*@u;
    border: 1px solid @border-color-c7;
    border-radius: 50%;
    display: block!important;
    position: relative;
    overflow: hidden;
    input{
        position: absolute;
        width: 39*@u;
        height: 39*@u;
        left: 0;
        top: 0;
        z-index: 3;
        opacity: 0;
        & + .new_copy{
            transition: all 0.2s ease;
        }
    }
    input:checked + .new_copy{
        width: 24*@u;
        height: 24*@u;
        background: @fn-color;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        z-index: 2;
        border-radius: 50%;
    }
}
